import React, { Component } from 'react';
import {
    Text,
    StyleSheet,
    Image,
    Dimensions,
    TouchableOpacity
} from 'react-native';
const { width } = Dimensions.get('window');

export default class MenuItem extends Component {
    render() {
        return (
            <TouchableOpacity
                activeOpacity={1}
                style={styles.container}
                              onPress={this.props.onPress}>
                <Image source={this.props.icon} resizeMode='contain' style={styles.icon} />
                <Text style={styles.text}>
                    {this.props.title}
                </Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        width: width/4,
        height: width/5,
    },
    text: {
        fontSize:12,
        color:'#7f7f7f',
    },
    icon: {
        width:0.56*104,
        height:0.56*104,
        margin:10,
    }
});